<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from "vue";
import { PubSubEnum } from "@/types";
import Pubsub from "pubsub-js";
import { Loading, Overlay } from "vant";

const showLoading = ref<boolean>(false);

const showLoadingFunc = () => {
  showLoading.value = true;
};

const hideLoadingFunc = () => {
  showLoading.value = false;
};

onMounted(() => {
  Pubsub.subscribe(PubSubEnum.SHOW_LOADING, showLoadingFunc);
  Pubsub.subscribe(PubSubEnum.HIDE_LOADING, hideLoadingFunc);
});

onUnmounted(() => {
  Pubsub.unsubscribe(PubSubEnum.SHOW_LOADING, showLoadingFunc);
  Pubsub.unsubscribe(PubSubEnum.HIDE_LOADING, hideLoadingFunc);
});
</script>
<template>
  <Overlay :show="showLoading" class="loading-overlay">
    <div class="wrapper">
      <Loading color="#fff" size="70px" vertical>
        <p>{{ $t("tip.loading") }}</p>
      </Loading>
    </div>
  </Overlay>
</template>
<style lang="less" scoped>
.loading-overlay {
  background-color: var(--loading-mask-background);
  z-index: 1000;

  .wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
